<template>
  <div class="order">
    <div v-for="order in orderList" :key="order.orderId" >
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span>订单号：{{ order.orderNumber }}</span>
          <el-button style="float: right; padding: 3px 0" type="text"  @click="handleDetail(order)">查看详情</el-button>
        </div>
        <el-row>
          <el-col :span="6">
            <div class="grid-content">
              <el-image
                style="width: 150px; height: 100px"
                :src="order.carImageUrl"
                fit="fill"></el-image>
            </div>
          </el-col>
          <el-col :span="18">
            <div class="grid-content">
              <dict-tag :options="dict.type.order_status" :value="order.status"/>
              <p>门店：{{order.storeName}}</p>
              <p>车辆：{{order.carName}}</p>
              <p>车牌：{{order.carPlateNumber}}</p>
              <p>租期：{{order.driveStartDate}} - {{order.driveEndDate}}</p>
              <p>金额：￥{{order.totalAmount}}</p>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <el-divider></el-divider>
    </div>
    <order-detail :dialogVisible="detailShow" ref="OrderDetail" :order-id="orderId" @changeShow="closeDetail"/>

  </div>
</template>

<script>
import {getOrder,myListOrder,listOrder} from "@/api/oms/order";
import orderDetail from "@/views/user/profile/orderDetail";

export default {
  name: "userOrder",
  components: {orderDetail},
  dicts: ['order_status',"pay_type"],
  data() {
    return {
      //详情子组件显示
      detailShow: false,
      orderId: '',
      // 遮罩层
      loading: true,
      // 订单信息表格数据
      orderList: [],
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    /** 查询订单信息列表 */
    getList() {
      this.loading = true
      // const params = Object.assign({}, this.pagination, { queryParams: JSON.stringify(this.searchParams.queryParams) })
      myListOrder().then(response => {
        this.orderList = response.data
        this.loading = false
      })
    },
    /** 详情按钮操作 */
    handleDetail(order) {
      this.orderId = order.orderId
      this.$refs.OrderDetail.getOrderDetail(this.orderId)
      this.detailShow = true
      console.log("is", this.detailShow)
    },
    //关闭详情
    closeDetail() {
      this.detailShow = false
      console.log("guanbi", this.detailShow)
    },
  }
}
</script>

<style scoped>
.order {
  padding: 20px;
}

.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
